<template>
  <div style="height: 100%; display: flex; flex-direction: column;">
    <el-dialog
      title="添加借用物资"
      :visible.sync="dialogVisible"
      width="80%"
      :before-close="handleClose"
      top="5vh"
      :modal="false"
      @close="cancel">
      <div style="height: 70vh; display: flex; flex-direction: column;">
        <el-row style="flex: 0 0 auto;">
          <el-col>
            <el-row>
              <el-col :span="16" style="text-align: left;">
                <el-form :inline="true" :model="queryGoodsForm" class="demo-form-inline"> 
                    <el-form-item label="仓库名称"> 
                      <el-select v-model="queryGoodsForm.warehouseId" disabled>
                          <el-option :label="queryGoodsForm.warehouseName" :value="queryGoodsForm.warehouseId" selected disabled></el-option>
                      </el-select>
                    </el-form-item>
                    <el-form-item label="物品名称"> 
                        <el-input v-model="queryGoodsForm.goodsName"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="query">查询</el-button>
                    </el-form-item>
                </el-form>
              </el-col>
              <el-col :span="8" style="text-align: right;">
                <el-button type="primary" @click="add">确定</el-button>
                <el-button type="primary" @click="cancel">取消</el-button>
              </el-col>
            </el-row>
          </el-col>
        </el-row>

        <el-row style="flex: 1 1 auto; margin-top: 15px;">
          <el-col style="height: 100%;">
            <el-table
                      ref="multipleTable"
                      height="500px"
                      :data="tableData"
                      tooltip-effect="dark"
                      style="width: 100%;"
                      stripe
                      border
                      highlight-current-row
                      @selection-change="handleSelectionChange">
                      <el-table-column
                      type="selection"
                      align="center"
                      width="55">
                      </el-table-column>
                      <el-table-column
                        type="index"
                        label="序号"
                        align="center"
                        width="80">
                      </el-table-column>
                      <el-table-column
                      prop="goodsId"
                      align="center"
                      label="物资编号"
                      >
                      </el-table-column>
                      <el-table-column
                      prop="goodsName"
                      align="center"
                      label="物资名称"
                      >
                      </el-table-column>
                      <el-table-column
                      prop="goodsNum"
                      align="center"
                      label="库存量"
                      >
                      </el-table-column>
                      <el-table-column
                      align="center"
                      label="借用数量"
                      >
                      <template>
                        {{1}}
                      </template>
                      </el-table-column>
                  </el-table>
          </el-col>
        </el-row>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
    name: 'AddBorrowGoods',
    props:{
      isShow:Boolean,
      warehouseId:Number,
      warehouseName:String
    },
    data(){
        return{
            queryGoodsForm:{
                warehouseId:"",
                warehouseName:'',
                goodsName:'',
                
            },
            tableData:[],
            checkGoods:[],
            dialogVisible:false,
        }
    },
    watch:{ 
      isShow(val){
            // console.log(val)
            //val代表新值，父组件传来的值
            this.dialogVisible = val
            if (val){ 
              this.query()
            }
        },
      warehouseId(newVal,oldVal){
          this.queryGoodsForm.warehouseId = newVal
      },
      warehouseName(newVal,oldVal){ 
        this.queryGoodsForm.warehouseName = newVal
      },

    },
    methods:{
        query(){
          this.$http.post("/lc/selectGoodsByWarehouseId",this.queryGoodsForm).then(res => { 
                      this.tableData = res.data.data
                      this.total = res.data.total
                    }).catch(err => {
                      console.error("Error querying goods:", err);
                      this.$message.error("查询物资失败: " + err.message);
                    })
        },
        add(){
            this.$emit("addGoods",this.checkGoods)
            this.cancel()
        },
        cancel(){
          //初始化界面
          this.checkGoods = []
          this.$refs.multipleTable.clearSelection()
          this.queryGoodsForm={
                warehouseId:"",
                warehouseName:'',
                goodsName:'',
            },
          this.$emit("clossDialog")
        },
        handleSelectionChange(val){
          this.checkGoods = val
        },
        handleClose(done) {
          done();
            
        }
        

    },
    // mounted(){
    //   this.queryGoodsForm.warehouseId = this.warehouseId
    //   this.queryGoodsForm.warehouseName = this.warehouseName
    //   // console.log(this.warehouseId)
    //   // console.log(this.warehouseName)
    //   this.query()
    // },
    updated() { 
      this.queryGoodsForm.warehouseId = this.warehouseId
      this.queryGoodsForm.warehouseName = this.warehouseName
      // console.log(this.warehouseId)
    },

}
</script>

<style>

</style>